<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script type="module">
        //引入three
        import * as THREE from "three";
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        const size = 10;
        const divisions = 10;


        //创建场景
        const scene = new THREE.Scene();

        const gridHelper = new THREE.GridHelper(size, divisions, '#fc3f80', '#07c160');
        scene.add(gridHelper);
        //创建相机      
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        //创建渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 使用软阴影类型

        document.body.appendChild(renderer.domElement);

        //创建立方体    
        const geometry1 = new THREE.BoxGeometry(1, 1, 1);
        const material1 = new THREE.MeshStandardMaterial({ color: '#b2e0df' });
        const cube = new THREE.Mesh(geometry1, material1);
        cube.castShadow = true
        cube.position.set(0, 0.5, 0)
        //将创建好的立方体添加到场景内
        scene.add(cube);

        const geometry = new THREE.PlaneGeometry(4, 4);
        const material = new THREE.MeshStandardMaterial({ color: '#ffffff', side: THREE.DoubleSide });
        const plane = new THREE.Mesh(geometry, material);
        plane.receiveShadow = true
        plane.rotateX(Math.PI / 2)
        scene.add(plane);

        //将相机的z坐标调整到5
        camera.position.z = 5;
        camera.position.x = 3;
        camera.position.y = 4;
        camera.lookAt(0, 0, 0)

        const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
        directionalLight.position.set(1, 2, 0);
        directionalLight.castShadow = true; // default false
        // 调整阴影分辨率
        directionalLight.shadow.mapSize.width = 1024; // 阴影贴图的宽度
        directionalLight.shadow.mapSize.height = 1024; // 阴影贴图的高度
        const helper = new THREE.DirectionalLightHelper(directionalLight, 1);

        scene.add(directionalLight, helper);

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.update();

        //渲染场景
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera)
        }
        animate()
    </script>
</body>

</html>